html,body{
    height: 100%;
  }

  .webWrapper{
      height: 90%;
  }

  .login-form{
      height: 100%;
      display: none;
  }

  @import url(https://fonts.googleapis.com/css?family=Open+Sans);


* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

#loginHeading{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding: 5vh 0vw;
    color: #444343;
}

.login { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }

.loginInput { 
    width: 100%; 
    margin-bottom: 10px; 
    border: none;
    outline: none;
    padding: 10px;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 4px;
    box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
}

.loginInput:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

#loginButton{
    color: white;
    background-color: red;
    font-weight: bold;
    border: none;
    padding: 1vh 1vw;
    margin: 2vh 0vw;
}


  .loadingContainer{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 15% 0;
  }
  
  
  /*To show initial loader*/
  .loader {
   
    width: 60px;
    height: 60px;
    font-size: 30px;
    color: #444343;
    font-weight: bold;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }